<template>
  <div class="server-api">
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="menuSearchForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <form-item prop="apiName" :label="$t('module.serverApi.apiName')">
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="searchForm.apiName"
            :placeholder="$t('module.serverApi.apiNameInput')"
            
            @on-enter="search"
          />
        </form-item>
<!--        服务类型-->
        <form-item prop="serverType" :label="$t('module.serverApi.serverType')">
          <Select
            
            v-model="searchForm.serverType"
            style="width: 100%;"
            :placeholder="$t('module.serverApi.serverTypeSelect')"
            transfer
            clearable
          >
            <Option
              v-for="item in serverTypeList"
              :value="item.vsiKey"
              :key="item.vsiKey"
              :label="item.vsiValue"
            ></Option>
          </Select>
        </form-item>
<!--        服务商-->
        <form-item prop="serverProvider" :label="$t('module.serverApi.serverProvider')">
          <Select
            
            v-model="searchForm.serverProvider"
            style="width: 100%;"
            :placeholder="$t('module.serverApi.serverProviderSelect')"
            transfer
            clearable
          >
            <Option
              v-for="item in serverProviderList"
              :value="item.vsiKey"
              :key="item.vsiKey"
              :label="item.vsiValue"
            ></Option>
          </Select>
        </form-item>
      </Form>
    </SelfAdaption>

    <InnerPageTable ref="serverApiTable" :config="tableConfig">
      <!-- handler bar 查询/重置-->
<!--      <div slot="handle-bar">-->
<!--        <RPButton optType="search" @click="search" />-->
<!--        <RPButton optType="reset" @click="reset" />-->
<!--      </div>-->
      <!-- table bar 添加-->
      <div slot="table-bar">
        <RPButton optType="create" @click="add" />
<!--        <RPButton optType="delete" @click="deleted" />-->
      </div>
    </InnerPageTable>
  </div>
</template>

<script>
import locales from "./locales";
import { serverApiColumns } from "./columns"
import serverApiEdit from "./serverApiEdit";
import { CoreModuleName } from "@/const";
import valueSetAPI from "@/api/valueSetAPI";
import serverAndResource from "@/api/serverAndResource";

export default {
  name: "index",
  mixins: [locales],
  data() {
    return {
      serverProviderList: [],
      serverTypeList: [],
      searchForm: {
        apiName: "",
        serverType: "",
        serverProvider: ""
      }
    }
  },
  computed: {
    tableConfig() {
      return { loadDataFn: this.queryServerApiList, columnsFn: serverApiColumns.bind(this), autoFirst: false };
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      let { userInfo } = $store.state[CoreModuleName]
      if (!userInfo) return
      this.getServerClassify()
      this.getServerProvider()
      // menuAPI.queryServiceList(param).then(data => {
      //   // 状态为有效：禁用复选框，不可删除
      //   let { records } = data;
      //   records = this.$root.$options.filters["selection-disabled"](records);
      //   responseProcess(data);
      // });
    },
    getServerProvider() {
      serverAndResource.obtainServerProvider({
        pageNum: 1,
        pageSize: 1000
        // name:
      }).then(res => {
        console.log('res', res)
      })
    },
    search(page = 1) {
      this.$refs.serverApiTable.load(this.searchForm, page)
    },
    getServerClassify() {
      valueSetAPI.getValueSetByCode('SERVICE_CLASSIFY').then(res => {
        this.serverTypeList = res
      })
    },
    add() {
      new this.$pageModal(
        serverApiEdit,
        {
          props: {
            serverTypeList: this.serverTypeList,
            serverProviderList: this.serverProviderList
          }
        },
        data => {
          data && this.search();
        }
      );
    },
    queryServerApiList({ responseProcess, param }) {
      menuAPI.queryServiceList(param).then(data => {
        // 状态为有效：禁用复选框，不可删除
        let { records } = data;
        records = this.$root.$options.filters["selection-disabled"](records);
        responseProcess(data);
      });
      //  [
      //   { classification: '范围', provider: "范围", name: "微软", address: "让外人", enabled: "1"}
      // ]
    },
    edit() {

    },
    setDisable() {
    },
    deleted() {

    },
    getOperations(menu) {
      let operations = [
        {
          type: "icon",
          icon: "md-create",
          text: this.$t("common.edit"),
          handle: () => {
            this.edit(menu.id, menu);
          }
        },
        {
          type: "icon",
          icon: "ios-settings",
          text: this.$t("module.common.disable_tips"),
          handle: () => {
            this.setDisable(menu);
          }
        },
        {
          type: "icon",
          icon: "ios-trash",
          text: this.$t("common.delete"),
          hidden: menu.enabled == 1,
          handle: () => {
            this.deleted(menu);
          }
        }
      ];
      return operations;
    },
  }
};
</script>

<style scoped>

</style>